<script setup lang="ts">

import ProblemSearchServer from "@/components/ProblemSearchServer.vue";
import {onMounted, reactive, ref, watch} from "vue";
import {cancelProblemApi, listProblemsService, publishProblemAPi, removeProblemApi} from "@/api/server/problem.ts";
import router from "@/router";
import {useProblemStore} from "@/stores/problem.ts";
import {ElMessage, ElMessageBox} from "element-plus";
import {useTestCaseStore} from "@/stores/test-case.ts";

const problemQueryForm = reactive({
  difficulty: undefined,
  keyword: '',
  pageSize: 10,
  pageNum: 1,
})

const problemListData = ref()

const problemListSize = ref(0)

async function search(difficulty: any, keyword: any) {
  problemQueryForm.difficulty = difficulty
  problemQueryForm.keyword = keyword
  await searchProblem()
}

async function searchProblem() {
  try {
    const data = await listProblemsService(problemQueryForm) as any
    problemListData.value = data.rows
    problemListSize.value = data.total
  } catch (e) {
    console.log(e)
  }
}

onMounted(function () {
  searchProblem()
})

// 监控每页条数变化（可选）
watch(
    () => problemQueryForm.pageNum,
    () => {
      searchProblem();
    }
);

const problemStore = useProblemStore();

// 跳转到编辑题目页面
async function handleProblemEdit(problemId: string) {
  useTestCaseStore().resetTestCase()
  if (problemId !== '') {
    await problemStore.initProblem(problemId)
  }
  await router.push("/server/problem-edit");

}

// 删除题目
async function removeProblem(problemId: string) {
  ElMessageBox.confirm(
      '你确定删除题目吗?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        try {
          await removeProblemApi(problemId)
          await searchProblem()
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
        } catch (e: any) {
          ElMessage.error(e)
        }
      })
}

// 发布题目
async function publishProblem(problemId: string) {
  ElMessageBox.confirm(
      '你确定发布题目吗?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        try {
          await publishProblemAPi(problemId)
          await searchProblem()
          ElMessage({
            type: 'success',
            message: '发布成功',
          })
        } catch (e: any) {
          ElMessage.error(e)
        }
      })
}

// 撤销发布
async function cancelProblem(problemId: string) {
  ElMessageBox.confirm(
      '你确定撤销发布题目吗?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        try {
          await cancelProblemApi(problemId)
          await searchProblem()
          ElMessage({})
        } catch (e: any) {
          ElMessage.error(e)
        }
      })
}

</script>

<template>
  <div class="container">
    <el-card>
      <div class="search">
        <ProblemSearchServer @search="search"/>
        <el-button type="info" @click="handleProblemEdit('')">新增题目</el-button>
      </div>
      <el-table :data="problemListData" stripe>
        <el-table-column prop="id" label="id" width="200"/>
        <el-table-column prop="title" label="标题" width="300" show-overflow-tooltip/>
        <el-table-column label="难度" min-width="100">
          <template #default="scope">
            <span v-if="scope.row.difficulty === 1"><el-tag type="primary">简单</el-tag></span>
            <span v-else-if="scope.row.difficulty === 2"><el-tag type="warning">中等</el-tag></span>
            <span v-else-if="scope.row.difficulty === 3"><el-tag type="danger">困难</el-tag></span>
            <span v-else>{{ scope.row.difficulty }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="100">
          <template #default="scope">
            <span v-if="scope.row.status === 0"><el-tag type="danger">撤销</el-tag></span>
            <span v-else><el-tag type="success">发布</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="250">
          <template #default="scope">
            <span v-if="scope.row.status === 0">
              <el-button size="small" type="primary" @click="handleProblemEdit(scope.row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="removeProblem(scope.row.id)">删除</el-button>
              <el-button size="small" type="success" @click="publishProblem(scope.row.id)">发布</el-button>
            </span>
            <span v-else>
              <el-button size="small" type="warning" @click="cancelProblem(scope.row.id)">撤销</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination background layout="prev, pager, next"
                       :total="problemListSize"
                       v-model:current-page="problemQueryForm.pageNum"
        />
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.container {
  height: 100%;

  :deep(.el-card) {
    min-width: 1000px;
    height: 100%;
    box-sizing: border-box;

    .search {
      margin-bottom: 20px;
      display: flex;
      width: 950px;
      justify-content: space-between;
      align-items: center;
    }

    .el-table {
      .el-table__inner-wrapper::before {
        background-color: transparent;
      }
    }

    .page {
      width: 1000px;
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>